<template>
  <div>
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            v-model="query.realName"
            placeholder="用户名"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="query.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始注册日期"
            end-placeholder="结束注册日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" circle @click="showAll"></el-button>
          <el-button icon="el-icon-plus" circle @click="dialog.addshow = true"></el-button>
        </el-form-item>
      </el-form>

      <!-- addForm -->
      <el-dialog title="添加用户" :visible.sync="dialog.addshow" width="40%">
        <el-form :model="form">
          <el-form-item label="用户姓名：" :label-width="formLabelWidth">
            <el-input v-model="addForm.realName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="addForm.birthday"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>

        </el-form-item>
          <el-form-item label="用户账号：" :label-width="formLabelWidth">
            <el-input v-model="addForm.tel" autocomplete="off"></el-input>
          </el-form-item>


          <el-form-item label="用户部门" :label-width="formLabelWidth">
            <el-select v-model="addForm.deptId" placeholder="请选择部门">
              <el-option
                v-for="(item, index) in deptList"
                :key="index"
                :label="item.deptName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog.addshow = false">取 消</el-button>
          <el-button type="primary" @click="addUser"
            >确 定</el-button
          >
        </div>
      </el-dialog>


      <!-- 用户修改 -->
      <el-dialog title="用户修改" :visible.sync="dialog.updateshow" width="40%">
        <el-form :model="form">
          <el-form-item label="用户姓名：" :label-width="formLabelWidth">
            <el-input v-model="updateForm.realName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="updateForm.birthday"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>

        </el-form-item>
          <el-form-item label="用户账号：" :label-width="formLabelWidth">
            <el-input v-model="updateForm.tel" autocomplete="off"></el-input>
          </el-form-item>


          <el-form-item label="用户部门" :label-width="formLabelWidth">
            <el-select v-model="updateForm.deptId" placeholder="请选择部门">
              <el-option
                v-for="(item, index) in deptList"
                :key="index"
                :label="item.deptName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog.updateshow = false">取 消</el-button>
          <el-button type="primary" @click="updateUser"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="120">
      </el-table-column>
      <el-table-column prop="realName" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="birthday" label="生日" width="120">
      </el-table-column>
      <el-table-column prop="tel" label="账号" width="120"> </el-table-column>
      <el-table-column prop="deptName" label="部门" width="120">
      </el-table-column>
      <el-table-column label="头像" show-overflow-tooltip>
        <template slot-scope="scope" width="160">
          <img
            :src="scope.row.headImg"
            alt=""
            style="width: 60px; height: 60px"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleClick(scope.row.id)"
          ></el-button>
            <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="handleDelete(scope.row.id)"
            ></el-button>
            
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
  </div>
</template>
  
  <script>
export default {
  methods: {
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.showAll();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.showAll();
    },
    handleClick(row) {
        this.dialog.updateshow = true
        this.$axios.get("/users/"+row)
        .then(response=>{
            this.updateForm = response.data.data.user;
        })
    },
    handleDelete(row){
        this.$axios.delete("/users/"+row)
        .then(response=>{
            if(response.data.code == 200){
                this.$message.success("删除成功");    
            }
            
        });
        this.showAll();
    },
    updateUser(){
        this.dialog.updateshow = false;
        this.$axios.put("/users",this.updateForm)
        .then(response=>{
            if(response.data.code == 200){
                this.$message.success("修改成功");  
                this.showAll();  
            }
            
        });
    },
    showAll() {
      this.$axios.post("/users/SelByLike", this.query).then((response) => {
        this.tableData = response.data.data.list;
        this.page.total = response.data.data.total;
      });
    },
    addUser() {
        this.dialog.addshow = false
        this.$axios.post("/users/", this.addForm).then((response) => {
        if(response.data.code == 200){
            this.$massage.success("添加成功");
        }else {
            this.$massage.error("添加失败");
        }
      });
    },
    selDept() {
      this.$axios.post("/depts/selAll").then((response) => {
        this.deptList = response.data.data.list;
      });
    },
  },
  mounted() {
    this.showAll();
    this.selDept();
  },

  data() {
    return {
      tableData: [],
      deptList: [],
      page: {
        pageSizes: [5, 10, 20, 50, 100], //下拉列表中的数组
        total: 0, //一共有多少条数据
      },
      query: {
        currentPage: 1, //代表当前页
        pageSize: 5, //代表每页显示多少条数据
        realName: "",
        dateRange: [],
      },
      dialog: {
        addshow: false,
        updateshow:false
      },
      addForm: {},
      updateForm: {},
    };
  },
};
</script>